import React, { useCallback, useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom'
import { Row, Col, Button, Image, Affix, Divider, Menu, Pagination } from 'antd'
import { ClockCircleOutlined, PhoneOutlined, QqOutlined, WechatOutlined } from '@ant-design/icons'
import AppCss from '../modlue.css/case.module.css'
import request from '../utils/request'
import Nav from "./Nav"


function Case() {

    const navigate = useNavigate()
    const [data, setdata] = useState([])
    const [condition, setCondition] = useState(1)

    // useEffect(() => {
    //     request.get(`/goods/student/?page=${condition}`).then(({ data }) => {
    //         console.log('data', data.result)
    //         setdata([...data.result])

    //     })
    // }, [condition]);
    useEffect(() => {
        request.get('/goods/student',{
                params:{
                    page:condition
                }
            }).then(({ data }) => {
            setdata([...data.data])
        })
    }, [condition]);

    const goto = useCallback((path) => {
        navigate(path)
    })
    const changePage = useCallback((idx) => {
        console.log(idx)
        setCondition(idx)
    }, [])
    return (
        <div className={AppCss.container} >
            <Nav />
            {/* <Affix>
                <Row style={{ height: 80, backgroundColor: '#fff', opacity: 0.9, borderBottom: '1px solid #ccc' }} >
                    <Col span={4}>
                        <a href=""><Image preview={false} height={80} src="http://case.pospal.cn/wp-content/themes/yinbaoV2/images/logo.png" /></a>
                    </Col>
                    <Col span={12} offset={3} style={{ fontSize: 18 }} className="nav">
                        <span><a>热卖</a></span><span><a>产品</a></span><span><a>行业</a></span>
                        <span><a>案列</a></span><span><a>帮助</a></span><span><a>下载</a></span>
                    </Col>
                    <Col span={5} style={{ lineHeight: 6 }}  >
                        <Button type="primary" ghost danger size="large" style={{ color: '#ff6727', border: '1px solid #ff6727', marginRight: '20px' }} onClick={goto.bind(null, '/login')}>登录</Button>
                        <Button type="primary" danger size="large" style={{ backgroundColor: '#ff6727', width: '120px' }} onClick={goto.bind(null, '/reg')}>免费注册</Button>
                    </Col>
                </Row>
            </Affix> */}
            <Row >
                <Image preview={false} height={600} src={'http://case.pospal.cn/wp-content/themes/yinbaoV2/images/section_1.jpg'} />
                <p style={{ width: '800px' }}>你的同行，都在用银豹</p>
                <p className={AppCss.p1} style={{ width: '800px' }}>银豹金牌顾问团队成功案例</p>
                <Button className={AppCss.btn} type="primary" danger size="large" style={{ backgroundColor: '#ff6727' }} onClick={goto.bind(null, '/reg')}>免费体验</Button>
            </Row>
            <Row className={AppCss.container_row}>
                <Col style={{ fontSize: '20px', height: 80 }}  >
                    <div style={{ marginTop: '20px'}} className={AppCss.classify}>
                        <span><a>全部</a></span><span><a>餐饮</a></span>
                        <span><a>零售</a></span><span><a>宠物</a></span>
                        <span><a>服装</a></span><span><a>母婴</a></span>
                        <span><a>烘焙</a></span><span><a>生鲜</a></span>
                        <span><a>美业</a></span><span><a>茶饮</a></span><span><a>轻餐饮</a></span>
                    </div>
                </Col>
            </Row>
            <Row style={{ backgroundColor: '#F3F4F6', height: 1300}}>

                {
                    data.map(item => {
                        return <Col key={item.id} span={8} style={{ height: 200, padding: '0 80px', textAlign: 'center' }}>
                            <a ><img style={{ width: 260, height: 260 }} src={item.imgurl} /></a>
                            <h2 className={AppCss.name}><a >{item.name}</a></h2>
                            <h3>{item.brand}</h3>
                        </Col>
                    })
                }
            </Row>
            <div className={AppCss.page} style={{ height: '200px', backgroundColor: '#F3F4F6', textAlign: 'center' }}>
                <span onClick={changePage.bind(null, 1)}><a>1</a></span>
                <span onClick={changePage.bind(null, 2)}><a>2</a></span>
                <span onClick={changePage.bind(null, 3)}><a>3</a></span>
            </div>


            <Row >

                <Image preview={false} height={700} src="http://case.pospal.cn/wp-content/themes/yinbaoV2/images/section_2.jpg" />
                <div className={AppCss.consult} >
                    <h2 style={{ fontSize: '60px', color: '#ff6727' }}>联系银豹金牌顾问</h2>
                    <h2 style={{ fontSize: '30px' }}>你无需三头六臂，你背后有银豹</h2>
                    <div style={{ backgroundColor: '#ff6727', height: '8px', width: '100px', margin: '50px auto' }}></div>
                    <h3>银豹金牌顾问团队拥有来自不同行业的咨询顾问</h3>
                    <h3>我们联合国际著名咨询公司，帮助数万企业实现了管理的信息化</h3>
                    <h3>现在，你可以直接联系我们，获得1对1专属金牌服务</h3>
                    <h2 style={{ fontSize: '22px', color: '#ff6727', marginTop: '10px', lineHeight: '70px' }}>咨询热线</h2>
                    <h2 style={{ fontSize: '42px', color: '#ff6727' }}>400-806-6866</h2>
                </div>
            </Row>
            <div style={{ height: '480px', backgroundColor: '#231f20', padding: '90px 200px 0 200px' }}>
                <Row >
                    <Col span={4} offset={2} style={{ color: '#fff' }}>
                        <div style={{ fontSize: '20px' }}>联系我们</div>
                        <div><ClockCircleOutlined />&nbsp;&nbsp;工作时间 9:00 - 21:00</div>
                    </Col>
                    <Col span={4} offset={1}>
                        <div style={{ color: '#fff' }} className='hotline'>
                            <div> <PhoneOutlined />&nbsp;&nbsp;全国统一服务热线</div><div style={{ fontSize: '20px' }}>400-806-6866</div>
                            <div>拨打专线更快响应哦</div><div>产品咨询 400-806-6866转1</div>
                            <div>连锁客户 400-806-6866转1</div><div>售后服务 400-806-6866转2</div>
                        </div>
                    </Col>
                    <Col span={6} offset={2}>
                        <div style={{ color: '#fff' }} className={AppCss.hotline}>
                            <div><QqOutlined />&nbsp;&nbsp;QQ咨询</div><div style={{ fontSize: '20px' }}>
                                800008626&nbsp;  <Button
                                    type="primary"
                                    size={'small'}
                                    style={{
                                        width: '77px',
                                        height: '22px',
                                        color: '#000',
                                        backgroundColor: '#A4D5F0',
                                        fontSize: '8px'
                                    }}>
                                    <QqOutlined style={{ fontSize: '12px' }} />QQ交谈</Button>
                            </div>
                            <div>客户投诉通道</div>
                            <div>3487430600&nbsp;<Button
                                type="primary"
                                size={'small'}
                                style={{
                                    width: '77px',
                                    height: '22px',
                                    color: '#000',
                                    backgroundColor: '#A4D5F0',
                                    fontSize: '8px'
                                }}>
                                <QqOutlined style={{ fontSize: '12px' }} />QQ交谈</Button></div>
                        </div>
                    </Col>
                    <Col offset={1}>
                        <div style={{ color: '#fff', marginBottom: '15px' }}><WechatOutlined />&nbsp;&nbsp;微信咨询</div>
                        <div style={{ marginBottom: '15px' }}><Image preview={false} height={99} width={99} src="http://case.pospal.cn/wp-content/themes/yinbaoV2/images/wx-qrcode.png" /></div>
                        <div style={{ color: '#7B787E' }}>微信扫一扫或者</div><div style={{ color: '#7B787E' }}>搜索“银豹收银”</div>
                    </Col>
                </Row>
                <Divider style={{ backgroundColor: '#7B787E' }} />
                <Row>
                    <Col span={12} offset={6}>
                        <div className={AppCss.bottom}>
                            <i><a href="">版本更新</a></i><i><a href="">支持社区</a></i>
                            <i><a href="">银豹博客</a></i><i><a href="">渠道合作</a></i>
                            <i><a href="">开放平台</a></i><i><a href="">关于我们</a></i>
                            <i style={{ borderRight: 'none' }}><a href="">联系我们</a></i>
                            <div style={{ marginTop: '10px' }}>2010-2016 © Copyright. Zhundong Network - All Rights Reserved</div><div>准动网络科技（厦门）有限公司版权所有</div>
                        </div>
                    </Col>
                </Row>
            </div>
        </div>
    )
}


export default Case;